<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./dist/redux.js"></script>
</head>

<body>
  <span></span>
  <input class="add" type="button" value="redux+2" />
  <input class="increment" type="button" value="redux-2" />
  <script>
    console.log(window.Redux);
    /* 1-获取Redux对象 */
    const { createStore } = window.Redux
    /* 2-创建store对象 */
    const store = createStore(reducer)
    /* 6-订阅 */
    const unSubscribe = store.subscribe(() => {
      console.log('监听到了');
      document.querySelector('span').innerHTML = store.getState()
    })
    /* 3-创建一个reducer  有两个参数 状态，对象] */
    function reducer (state = 5, action) {
      switch (action.type) {
        case 'add':
          return state + 2
        case 'increment':
          return state - 2
        default:
          return state
      }
    }
    // var action = {
    //   type: 'add'
    // }
    var action = () => {
      return {
        type: 'add'
      }
    }
    /* 5-获取初始状态 */
    console.log(store.getState(), 777);
    /* 4-发布任务 */
    store.dispatch(action())
    console.log(store, 777);


    /* 通过点击按钮来实现更改状态 */
    var btnAdd = document.querySelector('.add')
    var btnIncrement = document.querySelector('.increment')
    btnAdd.onclick = function () {
      store.dispatch({
        type: 'add'
      })
      // 取消订阅
      unSubscribe()
    }
    btnIncrement.onclick = function () {
      store.dispatch({
        type: 'increment'
      })
    }
  </script>

</body>

</html>